<!--学习路线图-->
<template>
    <el-dropdown style="padding: 50px 32px 0 32px;" @command="handleCommand">
        <el-button type="primary">
            知识点类型<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item divided command="high">大众掌握度高的知识点</el-dropdown-item>
                <el-dropdown-item divided command="low">大众掌握度低的知识点</el-dropdown-item>
                <!--                    <el-dropdown-item divided>双皮奶</el-dropdown-item>-->
                <!--                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>-->
            </el-dropdown-menu>
        </template>
    </el-dropdown>

    <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');
    var ecStat = require('echarts-stat');

    export default {
        data() {
            return {
                search: '',
                currentPage: 1,
                pageSize: 4000,
                total: 0,
                title: '大众掌握度高的知识点',
                isMax: true,
                dimensions: [],
                source: [],
            };
        },
        created() {

        },
        methods: {
            initCharts() {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;


                request.get("/acmMethod", { // 请求/scatterClustering接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    // console.log(res);

                    this.dimensions = ['method', 'ratio', 'num'];
                    this.source = [];

                    if (this.isMax === true) {
                        for (var i = 0; i < res.data.records.length; i++) {
                            var method = res.data.records[i]['method'];
                            var ratio = res.data.records[i]['ratio'];
                            var num = res.data.records[i]['num'];
                            if(num!==172 && num!==41) this.source.push([method, ratio, num]);
                            if(this.source.length>=10) break;
                        }
                    } else {
                        for (var i = res.data.records.length - 1; i >= 0; i--) {
                            var method = res.data.records[i]['method'];
                            var ratio = res.data.records[i]['ratio'];
                            var num = res.data.records[i]['num'];
                            if(num!==42) this.source.push([method, ratio, num]);
                            if(this.source.length>=10)break;
                        }
                    }


                    // console.log(this.data0)
                    console.log(this.source)

                    // console.log(this.data0,this.company);

                    option = {
                        title: {
                                text: this.title,
                                subtext: '数据截止至: 2021.08.10'
                        },
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 20,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        dataset: [{
                            // dimensions: ['name', 'age', 'profession', 'score', 'date'],
                            dimensions: this.dimensions,
                            // source: [
                            //         [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
                            //         ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
                            //         [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
                            //         ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
                            //         [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
                            //         [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
                            //         ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
                            //         [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
                            //         ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12'],
                            // ]
                            source: this.source
                        }, {
                            transform: {
                                type: 'sort',
                                config: {dimension: 'ratio', order: 'desc'}
                            }
                        }],
                        xAxis: {
                            type: 'category',
                            axisLabel: {interval: 0, rotate: 30},
                        },
                        yAxis: {
                            max: 0.6
                        },
                        series: {
                            type: 'bar',
                            encode: {x: 'method', y: 'ratio'},
                            datasetIndex: 1
                        }
                    };

                    option && myChart.setOption(option);

                })

            },
            handleCommand(command) {
                if (command === 'high') {
                    this.isMax = true;
                    this.title = '大众掌握度高的知识点';

                } else {
                    this.isMax = false;
                    this.title = '大众掌握度低的知识点';
                }
                this.initCharts();
                // console.log(this.type)
            }
        },

        mounted() {
            this.initCharts();
            console.log("mounted")
        }
    }
</script>

<style scoped>

</style>